<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ include file="../common/up.jsp" %>

<div class="panel">
    <div class="panel-heading">
        <span class="panel-title">${requestScope.activity.activity_name} 活动详情</span>
    </div>
    <div class="panel-body">
        <h3 id="activityName" name="activity_name" onclick="changeValue(this)">活动名称: ${requestScope.activity.activity_name}</h3>
        <p><strong>活动简介:</strong> <span id="activityIntro" name="activity_intro" onclick="changeValue(this)">${requestScope.activity.activity_intro}</span></p>
        <p><strong>活动地点:</strong> <span id="activityPlace" name="activity_place" onclick="changeValue(this)">${requestScope.activity.activity_place}</span></p>
        <p><strong>活动详情:</strong> <span id="activityDetail" name="activity_detail" onclick="changeValue(this)">${requestScope.activity.activity_detail}</span></p>
        <p><strong>开始时间:</strong> <span id="activityStartTime" name="activity_start_time" onclick="changeValue(this)"><fmt:formatDate value="${requestScope.activity.activity_start_time}" pattern="yyyy-MM-dd'T'HH:mm"/></span></p>
        <p><strong>结束时间:</strong> <span id="activityEndTime" name="activity_end_time" onclick="changeValue(this)"><fmt:formatDate value="${requestScope.activity.activity_end_time}" pattern="yyyy-MM-dd'T'HH:mm"/></span></p>

        <div class="actions">
            <button class="btn btn-primary" onclick="submit()">保存更改</button>
            <button class="btn btn-danger" onclick="deleteActivity(${requestScope.activity.activityId})">删除活动</button>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    let element;

    function disableAllFields() {
        const fields = document.querySelectorAll('.panel-body span');
        fields.forEach(field => field.style.pointerEvents = 'none');
    }

    function enableAllFields() {
        const fields = document.querySelectorAll('.panel-body span');
        fields.forEach(field => field.style.pointerEvents = 'auto');
    }

    function changeValue(ele) {
        if (element) {
            alert("请先完成当前编辑");
            return;
        }
        element = ele;
        let str = ele.innerHTML;
        if (/^<.*>$/.test(str)) {
            return false;
        }
        let name = ele.getAttribute("name");
        const html = `<input name='${name}' value='${str}' onblur='show()'/>`;
        ele.innerHTML = html;
        ele.firstElementChild.focus();
        disableAllFields();
    }

    function show() {
        document.querySelector(".panel>.notice").style.display = "block";
        document.querySelector(".panel>.notice .btn-success").onclick = submit;
        document.querySelector(".panel>.notice .btn-warning").onclick = shutdown;
    }

    function submit() {
        if (!element) {
            alert("请先选择要修改的字段");
            return;
        }
        let parent = element.parentNode;
        let id = '${requestScope.activity.activityId}';
        let data = {id: id};
        data[element.getAttribute("name")] = element.firstElementChild.value;

        // 确保时间格式正确
        if (element.getAttribute("name") === "activity_start_time" || element.getAttribute("name") === "activity_end_time") {
            const dateTimeFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/;
            if (!dateTimeFormat.test(element.firstElementChild.value)) {
                alert("时间格式不正确，请使用 yyyy-MM-ddTHH:mm 格式");
                return;
            }
        }

        axios.post("/activity/updateActivity", data)
            .then((response) => {
                element.innerHTML = element.firstElementChild.value;
                if (response.data === 1) {
                    alert("修改成功");
                    window.location.href = "/studentSociety/activity/activityList"; // 跳转到活动列表页
                } else {
                    alert(response.data.message);
                }
            })
            .catch((e) => {
                alert("异常信息: " + e);
            }).finally(() => {
            document.querySelector(".panel>.notice").style.display = "none";
            element = null; // Reset the element after submission
            enableAllFields();
        });
    }

    function shutdown() {
        if (element) {
            element.innerHTML = element.firstElementChild.defaultValue;
        }
        document.querySelector(".panel>.notice").style.display = "none";
        element = null; // Reset the element after cancellation
        enableAllFields();
    }

    function deleteActivity(activityId) {
        if (confirm("确定要删除该活动吗？")) {
            axios.post("/activity/deleteActivity", {id: activityId})
                .then((response) => {
                    if (response.data === 1) {
                        alert("活动删除失败！");
                        // window.location.href = "/studentSociety/activity/activityList"; // 跳转到活动列表页
                    } else {
                        alert("活动删除成功！");
                        window.location.href = "/studentSociety/activity/activityList"; // 跳转到活动列表页
                    }
                })
                .catch((error) => {
                    alert("异常信息: " + error);
                });
        }
    }
</script>

<div class="notice btn-primary">
    <h3>提交</h3>
    <div class="row">
        <button class="btn btn-success col-sm-offset-2 col-sm-4" onclick="submit()">Yes</button>
        <button class="btn btn-warning col-sm-4" onclick="shutdown()">No</button>
    </div>
</div>

<style>
    .panel {
        margin-bottom: 20px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 15px;
    }

    .panel-heading {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .panel-body {
        margin-top: 10px;
    }

    .actions {
        margin-top: 20px;
    }

    .actions a, .actions button {
        margin-right: 10px;
    }

    .notice {
        display: none;
        position: fixed;
        height: 150px;
        width: 300px;
        top: calc((100% - 150px) / 2);
        left: calc((100% - 300px) / 2);
        border-radius: 10px;
        background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        padding: 20px;
        text-align: center;
    }

    .notice h3 {
        margin-bottom: 20px;
    }

    .notice .row {
        display: flex;
        justify-content: space-around;
    }

    .notice button {
        margin: 0 10px;
    }

    input[type="text"], input[type="datetime-local"] {
        width: 100%;
        padding: 6px 12px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
</style>

<%@ include file="../common/down.jsp" %>



